<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>validate2</title>
</head>
<style>
    /*span{
        padding: 100px;
        color: #EA5200;
    }*/
    input.error { border: 1px solid red; }
    label.error {
        color: #EA5200;
    }
    /*label.checked {
        background:url("../images/timg.jpg") no-repeat 0px 0px;
    }*/
</style>
<script src="../js/jquery-3.4.1.js"></script>
<script src="../js/jquery.validate.js"></script>
<script src="../js/additional-methods.js"></script>
<script>

    $.validator.setDefaults({
        submitHandler: function() {
            alert("提交事件!");
        }
    });
    $(function () {
        $("#signupForm").validate({
            rules: {
                firstname: "required",
                birthday: {
                    required:true,
                    dateISO:true
                },
                username: {
                    required: true,
                    minlength: 2
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
                topic: {
                    required: "#newsletter:checked",
                    minlength: 2
                },
                agree: "required",
                code:{
                    required:true,
                    isZipCode:true
                }
            },
            messages: {
                firstname: "请输入您的名字",
                birthday: {
                    required:"请输入您的生日",
                    dateISO:"日期格式错误"
                },
                username: {
                    required: "请输入用户名",
                    minlength: "用户名必需由两个字母组成"
                },
                password: {
                    required: "请输入密码",
                    minlength: "密码长度不能小于 5 个字母"
                },
                confirm_password: {
                    required: "请输入密码",
                    minlength: "密码长度不能小于 5 个字母",
                    equalTo: "两次密码输入不一致"
                },
                email: "请输入一个正确的邮箱",
                agree: "请接受我们的声明",
                code:{
                    required: "请输入邮编",
                    isZipCode: "请输入一个正确的邮编"
                }

            },
           /* errorPlacement: function(error, element) {
                // Append error within linked label
                $( element )
                    .closest( "form" )
                    .find( "label[for='" + element.attr( "id" ) + "']" )
                    .append( error );
            },
            errorElement: "span"*/
        })
    })
</script>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
    <fieldset>
        <legend>验证完整的表单</legend>
        <p>
            <label for="firstname">名字</label>
            <input id="firstname" name="firstname" type="text">
        </p>
        <p>
            <label for="birthday">生日</label>
            <input id="birthday" name="birthday" type="text">
        </p>
        <p>
            <label for="username">用户名</label>
            <input id="username" name="username" type="text">
        </p>
        <p>
            <label for="password">密码</label>
            <input id="password" name="password" type="password">
        </p>
        <p>
            <label for="confirm_password">验证密码</label>
            <input id="confirm_password" name="confirm_password" type="password">
        </p>
        <p>
            <label for="email">Email</label>
            <input id="email" name="email" type="email">
        </p>
        <p>
            <label for="code">邮编</label>
            <input id="code" name="code" type="text">
        </p>
        <p>
            <label for="agree">请同意我们的声明</label>
            <input type="checkbox" class="checkbox" id="agree" name="agree">
        </p>
        <p>
            <input class="submit" type="submit" value="提交">
        </p>
    </fieldset>
</form>
</body>
</html>